<template>
  <div class="model-operate">
    <div v-if="!value5.type" @click="showDialog" class="model-operate-nodata">
      <Plus class="model-operate-nodata-icon"></Plus>操作面板
    </div>
    <template v-if="value5.type === 'flow'">
      <div
        v-for="(item, index) in value5.value"
        :key="Math.random()"
        :style="{ backgroundColor: `${item.btnColor + '23' || ''}` }"
        :class="[
          'model-operate-table-left-item',
          checkedIndex === index ? 'item-checked' : '',
        ]"
      >
        <div class="model-operate-table-left-item-des">
          <div class="model-operate-table-left-item-des-title">
            {{ item.name || "操作名称" }}
          </div>
          <div class="model-operate-table-left-item-des-remark">
            {{ item.nameDetail || "操作项描述" }}
          </div>
        </div>

        <el-button
          class="model-operate-table-left-item-btn"
          :style="{
            backgroundColor: `${item.btnColor || ''}`,
            border: `1px solid ${item.btnColor || ''}`,
          }"
          type="primary"
          >{{ item.btnName || "按钮名称" }}</el-button
        >
      </div>
    </template>
    <!-- 宫格样式 -->
    <div class="model-operate-table-left-grid" v-else>
      <div
        v-for="(item, index) in value5.value"
        :key="Math.random()"
        :class="[
          'model-operate-table-left-item2',
          checkedIndex === index ? 'item-checked' : '',
        ]"
      >
        <el-image
          :src="item.icon || testPic"
          fit="contain"
          class="model-operate-table-left-item2-img"
        ></el-image>
        <div class="model-operate-table-left-item2-des">
          {{ item.name || "操作名称" }}
        </div>
      </div>
    </div>
    <el-button
      v-if="value5.type"
      @click="showDialog"
      type="primary"
      style="margin-top: 10px"
      >操作面板配置</el-button
    >
  </div>
  <el-dialog
    v-model="operateShow"
    :title="operateTitle"
    style="height: 45rem; overflow: hidden"
    :beforeClose="closeOprate"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div
          style="display: flex; flex-direction: column; align-items: flex-start"
        >
          <div class="model-operate-title">{{ operateTitle }}</div>
          <div class="model-operate-title-hint">
            可为扫码者设置需执行的操作，支持填写表单、更新状态、跳转其他页面
          </div>
        </div>
      </div>
    </template>
    <div class="model-operate-header">
      <div class="model-operate-header-title">
        <div class="model-operate-header-title-icon">1</div>
        选择样式
      </div>
      <div class="model-operate-header-divider"></div>
      <div class="model-operate-header-title">
        <div class="model-operate-header-title-icon">2</div>
        设置操作项
      </div>
    </div>
    <!-- 第一步 -->
    <div v-if="stepIndex == 0" class="model-operate-layout">
      <div
        @click="checkedFlow('flow')"
        :class="[
          'model-operate-layout-item',
          copyValue.type === 'flow' ? 'model-operate-layout-checked' : '',
        ]"
      >
        <div>按钮列表</div>
        <el-image
          :src="listIcon"
          class="model-operate-layout-item-img"
        ></el-image>
      </div>
      <div
        @click="checkedFlow('grid')"
        :class="[
          'model-operate-layout-item',
          copyValue.type === 'grid' ? 'model-operate-layout-checked' : '',
        ]"
      >
        <div>宫格列表</div>
        <el-image
          :src="listIcon"
          class="model-operate-layout-item-img"
        ></el-image>
      </div>
    </div>
    <!-- 第二步 -->
    <div v-if="stepIndex == 1" class="model-operate-table">
      <div class="model-operate-table-left">
        <!-- 列表样式 -->
        <template v-if="copyValue.type === 'flow'">
          <div
            v-for="(item, index) in copyValue.value"
            :key="Math.random()"
            @click="checkedItem(index)"
            :style="{ backgroundColor: `${item.btnColor + '23' || ''}` }"
            :class="[
              'model-operate-table-left-item',
              checkedIndex === index ? 'item-checked' : '',
            ]"
          >
            <Delete
              @click.stop="deleteItem(index)"
              v-if="checkedIndex === index"
              class="model-operate-table-left-item-del"
            ></Delete>
            <div class="model-operate-table-left-item-des">
              <div class="model-operate-table-left-item-des-title">
                {{ item.name || "操作名称" }}
              </div>
              <div class="model-operate-table-left-item-des-remark">
                {{ item.nameDetail || "操作项描述" }}
              </div>
            </div>

            <el-button
              class="model-operate-table-left-item-btn"
              :style="{
                backgroundColor: `${item.btnColor || ''}`,
                border: `1px solid ${item.btnColor || ''}`,
              }"
              type="primary"
              >{{ item.btnName || "按钮名称" }}</el-button
            >
          </div>
        </template>
        <!-- 宫格样式 -->
        <div class="model-operate-table-left-grid" v-else>
          <div
            v-for="(item, index) in copyValue.value"
            :key="Math.random()"
            @click="checkedItem(index)"
            :class="[
              'model-operate-table-left-item2',
              checkedIndex === index ? 'item-checked' : '',
            ]"
          >
            <Delete
              @click.stop="deleteItem(index)"
              v-if="checkedIndex === index"
              class="model-operate-table-left-item-del"
            ></Delete>
            <el-image
              :src="item.icon || testPic"
              fit="contain"
              class="model-operate-table-left-item2-img"
            ></el-image>
            <div class="model-operate-table-left-item2-des">
              {{ item.name || "操作名称" }}
            </div>
          </div>
        </div>
        <div @click="addmore" class="model-operate-table-left-add">
          <Plus class="model-operate-table-left-add-icon"></Plus>添加操作项
        </div>
        <div class="model-operate-table-left-hint">
          当前样式：{{ copyValue.type === "flow" ? "按钮列表" : "宫格列表" }}
        </div>
      </div>

      <div v-if="operateShow & refresh" class="model-operate-table-right">
        <operate-setting
          :type="copyValue.type"
          v-model:formValue="copyValue.value[checkedIndex]"
        ></operate-setting>
      </div>
      <div
        v-if="operateShow & !refresh"
        v-loading="!refresh"
        style="flex: 3; height: 100%"
      ></div>
    </div>
    <el-button v-if="stepIndex === 1" @click="goLastStep">取消</el-button>
    <el-button
      @click="stepIndex === 1 ? submitOperate() : changeStep()"
      type="primary"
      >{{ btnHint }}</el-button
    >
  </el-dialog>
</template>

<script setup>
import { ref, nextTick, getCurrentInstance, onMounted } from "vue";
import deepcopy from "deepcopy";
import "@/utils/style/modelStyle.scss";
import listIcon from "@/assets/images/logo.png";
import operateSetting from "../component/operateSetting.vue";
let { proxy } = getCurrentInstance();
//props
const value5 = defineModel("value5");
const copyValue = ref(null);
const operateShow = ref(false);
const stepIndex = ref(0);
const btnHint = ref("下一步：设置选项");
const operateTitle = ref("操作面板配置");
const checkedIndex = ref(0);
const refresh = ref(true);
const showDialog = () => {
  operateShow.value = true;
  copyValue.value = deepcopy(value5.value);
  operateTitle.value = "操作面板配置";
  btnHint.value = "下一步：设置选项";
  stepIndex.value = 0;
};

const testPic =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";

const listObj = {
  auth: "",
  name: "",
  nameDetail: "",
  btnName: "",
  btnColor: "",
  icon: "",
};

const deleteItem = (index) => {
  if (copyValue.value.value.length === 1) {
    ElMessage.error("至少需要一个操作项");
    return;
  }

  refresh.value = false;
  copyValue.value.value.splice(index, 1);
  nextTick(() => {
    checkedIndex.value = 0;
    refresh.value = true;
  });
};

const goLastStep = () => {
  ElMessageBox.confirm("确定取消?当前页面数据将不会保存", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    if(value5.value.value){
      copyValue.value.value = deepcopy(value5.value.value);
    }else{
      delete copyValue.value.value;
    }
    stepIndex.value = 0;
    operateTitle.value = "操作面板配置";
    btnHint.value = "下一步：设置选项";
  });
};

/* 选中操作项 */
const checkedItem = (index) => {
  if (checkedIndex.value === index) {
  } else {
    refresh.value = false;
    setTimeout(() => {
      refresh.value = true;
    }, 500);
  }
  checkedIndex.value = index;
};

onMounted(() => {
  
  // value5.value = {
  //   type: "flow",
  //   value: [
  //     {
  //       auth: "1",
  //       name: "11",
  //       nameDetail: "",
  //       btnName: "22",
  //       btnColor: "#108EE9",
  //       icon: "",
  //       operateWay: "跳转链接",
  //     },
  //   ],
  // };
});

/* 选择样式 flow /  grid */
const checkedFlow = (type) => {
  copyValue.value.type = type;
};

const closeOprate = () => {
  operateShow.value = false;
  copyValue.value = {};
};
const changeStep = () => {
  if (copyValue.value.type) {
    stepIndex.value = 1;
    operateTitle.value = "设置操作项";
    btnHint.value = "提交";
    //todo
    if (!copyValue.value.value) {
      copyValue.value.value = [];
      copyValue.value.value.push(JSON.parse(JSON.stringify(listObj)));
    } else {
      console.log("fanxian:", copyValue.value.value);
    }

    checkedIndex.value = 0;
  } else {
    ElMessage.error("请选择操作面板样式");
  }
};
const addmore = () => {
  // console.log("add", listObj);

  copyValue.value.value.push(JSON.parse(JSON.stringify(listObj)));
};
const validteValue = (success, error) => {
  let isSucceed = true;
  let errStr = "";

  for (let index = 0; index < copyValue.value.value.length; index++) {
    const item = copyValue.value.value[index];
    if (!item.operateWay) {
      errStr = `操作项${index + 1}请选择操作方式`;
      error(errStr);
      isSucceed = false;
      return;
    }
    if (!item.auth) {
      errStr = `操作项${index + 1}请填写操作人`;
      error(errStr);
      isSucceed = false;
      return;
    }
    if (!item.name) {
      errStr = `操作项${index + 1}请填写操作名称`;
      error(errStr);
      isSucceed = false;
      return;
    }
    if (copyValue.value.type == "flow") {
      if (!item.btnName) {
        errStr = `操作项${index + 1}请填写按钮名称`;
        error(errStr);
        isSucceed = false;
        return;
      }
      if (!item.btnColor) {
        errStr = `操作项${index + 1}请选择按钮颜色`;
        error(errStr);
        isSucceed = false;
        return;
      }
    } else {
      if (!item.icon) {
        errStr = `操作项${index + 1}请上传图标`;
        error(errStr);
        isSucceed = false;
        return;
      }
    }
  }

  if (isSucceed) {
    success();
  }
};
const submitOperate = () => {
  validteValue(
    () => {
      ElMessage.success("操作面板配置成功");
      operateShow.value = false;
      value5.value = deepcopy(copyValue.value);
      // console.log(JSON.stringify(value5.value));
    },
    (e) => {
      ElMessage.error(e);
    }
  );
  // operateShow.value = false;
};
</script>

<style lang="scss"></style>
